import React, { memo } from 'react';
import { Card, Radio, Row, Col, Tooltip, Icon } from 'antd';
import { FormattedMessage } from 'umi/locale';
import styles from './Analysis.less';
import { Pie } from '@/components/Charts';
import Yuan from '@/utils/Yuan';

const solveeProportion = memo(
  ({ salesType, loading, salesPieData, handleChangeSalesType, allTitle, colors }) => (
    <div style={{ marginTop: 24 }}>
      <Row className={styles.colorBackground}>
        <Col style={{ padding: 10, color: '#4B5475', fontWeight: 600 }}>
          <div className={styles.title}>
            <FormattedMessage id="app.IntroduceRow.solve-download" defaultMessage="download" />
            <span style={{ marginLeft: 12, paddingTop: 2 }}>
              <Tooltip
                placement="top"
                title="在问答中，用户对机器人的回复做出的评价，有已解决和未解决两个选择，根据用户的问题命中用户库还是闲聊库，以及对机器人回复进行已解决和未解决的选择，计算出它们分别所占的比例。"
                arrowPointAtCenter
              >
                <Icon type="info-circle" />
              </Tooltip>
            </span>
          </div>
        </Col>
      </Row>
      <Card loading={loading} bordered={false} className="pieColor">
        <div style={{ marginBottom: 30 }}>
          <div className="radioYs">
            <Radio.Group value={salesType} onChange={handleChangeSalesType}>
              <Radio.Button value="alls">
                <FormattedMessage
                  id="app.IntroduceRow.solve-proportion"
                  defaultMessage="已解决/未解决比例"
                />
              </Radio.Button>
              {/* <Radio.Button value="onlines">
                <FormattedMessage
                  id="app.IntroduceRow.user-library-proportion"
                  defaultMessage="用户库已解决/未解决比列"
                />
              </Radio.Button> */}
            </Radio.Group>
          </div>
        </div>
        <Pie
          colors={colors}
          hasLegend
          subTitle={allTitle}
          data={salesPieData}
          valueFormat={value => {
            value;
          }}
          height={270}
          lineWidth={4}
          style={{ padding: '8px 0' }}
        />
      </Card>
    </div>
  )
);

export default solveeProportion;
